<template>
    <div class="login">
        <div class="left-side fl">
            <div class="login-module">
                <div class="hy-font">欢迎</div>
                <ElForm ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" label-position="top">
                    <div class="login-font mt30">账号</div>
                    <ElFormItem label="" prop="username">
                        <ElInput v-model="ruleForm.username" placeholder=""></ElInput>
                    </ElFormItem>
                    <div class="login-font">密码</div>
                    <ElFormItem label="" prop="password">
                        <ElInput v-model="ruleForm.password" type="password" autocomplete="off"></ElInput>
                    </ElFormItem>
                    <div class="clearfix">
                        <ElLink class="fl" :underline="false">忘记密码</ElLink>
                        <ElLink
                            v-logAction="{
                                page: '/login',
                                item: 'register',
                                descriptions: '用户点击注册按钮',
                            }"
                            class="fr"
                            :underline="false"
                            @click="register"
                        >
                            注册运营
                        </ElLink>
                    </div>
                </ElForm>
                <div class="mt20">
                    <ElButton
                        v-logAction="{
                            page: '/login',
                            item: 'login',
                            descriptions: '用户点击登录按钮',
                        }"
                        class="login-button"
                        size="large"
                        @click="login(ruleFormRef)"
                    >
                        登录
                    </ElButton>
                </div>
            </div>
        </div>
        <div class="right-side fr clearfix">
            <img class="right-side-img" src="../../assets/image/租户.png" alt="" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { setCookie, deleteCookie, debounce } from '@/utils/utils';
import { userLogin } from '@/api/api.query.util';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { initTheme, getTenantStyle } from '../Home/menuConfig';

const ruleFormRef = ref<FormInstance>();

const router = useRouter();
const ruleForm = reactive({
    username: '',
    password: '',
});
deleteCookie('SaaS_Token');
const rules = reactive({
    username: [
        {
            required: true,
            message: '账号不能为空',
            trigger: 'change',
        },
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'change',
        },
    ],
});

initTheme();

const login = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    const themeDta = await getTenantStyle();
    // 表单校验
    formEl.validate((valid) => {
        if (valid) {
            debounce(() => {
                userLogin({
                    method: 'post',
                    data: {
                        userName: ruleForm.username,
                        password: ruleForm.password,
                        accountType: 3, // 租户accountType为3
                    },
                }).then((res) => {
                    // 登录成功弹窗
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    });
                    if (!themeDta.result) {
                        router.push({ name: '/change-theme' });
                    } else {
                        router.push({ name: '/home/service-management' });
                    }
                    setCookie('SaaS_Token', res.result);
                });
            }, 500);
            return valid;
        }
        return false;
    });
};

// 注册
function register() {
    router.push({ path: '/register' });
}
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    .left-side {
        width: 50%;
        height: 100%;
        position: relative;
        .login-module {
            position: absolute;
            top: 27%;
            left: 27%;
            width: 46%;
            margin: 0 auto;
            .hy-font {
                font-size: 32px;
                color: #333333;
                line-height: 32px;
            }
            .login-font {
                font-size: 14px;
                line-height: 14px;
                display: inline-block;
                margin-bottom: 5px;
            }
            .login-input {
                height: 5%;
                width: 100%;
                display: block;
            }
            .login-button {
                background-color: var(--prmary-color);
                width: 100%;
                color: #ffffff;
            }
        }
    }
    .right-side {
        width: 50%;
        .right-side-img {
            width: 100%;
        }
    }
}
</style>
